<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>VUE 学习</title>
	</head>
	<style type="text/css">
		.active{
			width: 500px;
			height: 200px;
			background: red;
		}
		.classblue{
			width: 200px;
			height: 50px;
			background: blue;
			color: white;
		}
		.yellow{
		    background: yellow;
		    width: 100px;
		    height: 100px;
		    margin-top: 10px;
		}
		
		.mybox{
			margin-top:10px ;
	        width: 100px;
	        height: 100px;
	        background: red;
	    }
	    .myboxcolor{
	        color: yellow;
	    }
	    .aaa{
	       border: 5px solid #ccc;
	    }
		.bbb{
	        height: 100px;
	    }
	    	
	</style>

	<body>
		<div id="app">
			<h1> class与style绑定</h1>
			<div id="app-7">
				<!--
                	作者：tqw4321@126.com
                	时间：2018-06-26
                	描述：对象表达式语法
                -->
				<div id="example" class="box" v-bind:class="{active:isActive}" >
				  <p>
				    	当isActive为true时 class="box active"，也就是说v-bind:class 与普通class共存			    
				  </p>	
				  <div v-bind:class="classobj">
				  	绑定一个数据对象
				  </div>
				  <div v-bind:class="classyellow">
				  	绑定一个计算属性
				  </div>
				  
				</div>
				
				<div id="example1" class = "box" v-bind:class="[isActive,{isActive1:isActive5},isActive5 ? isActive2 : '']" >					
					{{msg}}					
				</div>
				
				<div id="example2">					
					<tanchu v-bind:class="classobj">						
					</tanchu>					
				</div>
				
				<div id="example3">
				    <div v-bind:style="{background:a,border:b,width:c}">内联样式</div>
				    <div v-bind:style="classObj">内联样式</div>
				    <div v-bind:style="[classObj,classObj1]">内联样式数组语法</div>				    
				</div>
				
			</div>
		</div>

	</body>
	
	<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	

	<script type="text/javascript">
		
		Vue.component('tanchu', {
	        template: '<div class="bbb"><input type="button" value="弹出"/><p>在组件中使用对象绑定</p></div>'
	   	});
		
		var example = new Vue({
			el: '#example',
			computed:{
				//返回一个计算属性
				classyellow:function(){
					return{yellow:this.isActive}
				}				
			},
			data:{
				isActive:true,
				classobj:{
					classblue:true
				}
			}			
		});
		
		var example1 =  new Vue({
			el:'#example1',
			data:{
	            msg:"数组语法",
	            isActive5:true,
	            isActive:"mybox",
	            isActive1:"myboxcolor",
	            isActive2:"aaa"
	        }
		});
		
		var example2 =  new Vue({
			el:"#example2",
			data:{
				isActive:true,
				classobj:{
					classblue:true,
					aaa:true
				}
			}
		});
		//使用内联样式
		var example3 =  new Vue({
			el:"#example3",
			data:{
	            a:"red",
	            b:"5px solid #ccc",
	            c:"100px",
	            classObj:{
	                background:"red",
	                border:"5px solid #ccc",
	                width:"100px",
	                
	            },
	            classObj1:{
	            	marginTop:"10px"
	            }
        	}
		});
		
		
	</script>

</html>